<template>
  <div class="home">
    <van-nav-bar title="首页" />
    <div class="head">
      <van-swipe class="my-swipe" :autoplay="3000">
        <van-swipe-item v-for="(image,index) in images" :key="index" @click="detial(image)">
          <img v-lazy="'prod-api'+image.imgUrl" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="content">
      <div class="person">
        <a href="#/personal">
          <img src="../assets/person.png" alt />
        </a>
        <p>个人中心</p>
      </div>
      <div class="box">
        <a href="#/boxappointment">
          <img src="../assets/boxnull.png" alt />
        </a>
        <p>行李箱预约</p>
      </div>
      <div class="list">
        <a href="#/entlist">
          <img src="../assets/list.png" alt />
        </a>
        <p>我的订单</p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  mounted: function() {
    this.url();
  },
  methods: {
    onClickLeft() {
      this.$router.push("/login");
    },
    detial(image) {
      this.$router.push({
        name: "detial",
        params: {
          id: image.id,
          points: image.points,
          title: image.title,
          con: image.content,
          url: "prod-api" + image.imgUrl
        }
      });
    },
    url() {
      this.$axios.get("prod-api/app/advertisement/list").then(res => {
        if (200 == res.data.code) {
          this.images = [];
          let list = res.data.data;
          this.images = res.data.data;
          // for (var i = 0; i < list.length; i++) {
          //   this.images.push("prod-api" + list[i].imgUrl);
          // }
          //console.log(this.images);
        }
      });
    }
  },
  data() {
    return {
      images: []
    };
  }
};
</script>
<style lang="scss" scoped>
.home {
  .head {
    background: url(../assets/bg2.png) no-repeat;
    height: 200px;
    width: 100%;
  }
  .content {
    display: flex;
    justify-content: space-around;
    margin: 10% 0;
  }
  /deep/.van-swipe {
    position: relative;
    top: 0;
    height: 300px;
    margin-top: 0;
    /deep/.van-swipe__indicators {
      position: absolute;
      bottom: 50px;
    }
  }

  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 10px;
    text-align: center;
    img {
      width: 100%;
      height: 200px;
    }
  }
}
</style>
